<template>
  <div class="bg-grey">
    <div class="flex-middle-center font-xl bg-white py-2">
      <i :class="{'text-red': m.hostHot}">
        <small>{{m.hostRank}}</small>
        {{m.hostShort}}</i>
      <small class="text-grey mx-5">VS</small>
      <i :class="{'text-red': m.guestHot}">{{m.guestShort}}
        <small>{{m.guestRank}}</small>
      </i>
    </div>

    <div class="d-flex bg-white m-3" :class="{sg: m.ttg.isBetOne}">
      <small class="yield bg-blue br-l">总进球</small>
      <div class="d-flex flex-wrap grow">
        <div class="g box box-lg" :class="on('zjq|' + (e - 1))" @click="select('zjq|' + (e - 1))" v-for="e in 7">
          <div>{{e - 1}}球</div>
          <small>{{m.ttg['s' + (e - 1)]}}</small>
        </div>
        <div class="g box box-lg" :class="on('zjq|7')" @click="select('zjq|7')">
          <div>7+球</div>
          <small>{{m.ttg['s7']}}</small>
        </div>
      </div>
    </div>

    <div class="d-flex" @click="$emit('hide')">
      <a class="btn btn-lg btn-secondary grow b-no rad-0">取消</a>
      <a class="btn btn-lg btn-danger grow b-no rad-0">确定</a>
    </div>

  </div>
</template>

<script>
import { mixin } from './calculator'

export default {
  name: 'popup-zjq',
  mixins: [mixin]
}
</script>
